<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //获取焦点的方法
        function op1(){
            //设置文本框里的内容为空，设置字体颜色是黑色
            //获取文本框标签对象
            var textElement=document.getElementById('key');
            //设置文本框标签里的内容为空
            textElement.value='';
            //设置文本框里字体颜色为黑色
            textElement.style.color='#000000';
        }
        //失去焦点执行的方法
        function op2(){
            /*
             获取文本框里里内容
             如果有内容，不做任何处理
             如果没有内容，输入的内容：请输入商品名称
             字体颜色为：#CCCCCC
             */
            //获取文本标签对象
            var textElement=document.getElementById('key');
            //获取文本标签对象里的内容
            var textContext=textElement.value;
            //当内容为空时
            if(!(textContext!=null&&textContext!='')){
                textElement.style.color='#000000';
                textElement.value='请输入商品名称';
            }
        }
    </script>
</head>
<body>
<form action=onfocus.html method=post name=f>
    请输入搜索关键字：<input type=text id=key value=请输入商品名称 onfocus="op1()" onblur="op2()" style="color:#CCCCCC">
</form>
</body>
</html>